<template>
  <section id="recordCoin">
    <el-row style="line-height: 30px; padding-bottom: 10px;">
      <el-col :span="5" class='flex'>
        <span style='white-space:nowrap '>账变时间：</span>
        <div class="block" style="flex: 1">
          <el-date-picker
            v-model="form.beginDate"
            type="datetime" @change ="changeDate1"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="5" class='flex'>
        <span style='white-space:nowrap;padding: 0 8px'>至</span>
        <div class="block" style="flex: 1">
          <el-date-picker @change ="changeDate2"
            v-model="form.endDate"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="5" class='flex'>
        <span style='white-space:nowrap;padding: 0 3px'>支付类型：</span>
        <el-select clearable v-model="form.payType" placeholder="请选择">
          <el-option
            v-for="item in payType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5" class='flex'>
        <span style='white-space:nowrap;padding: 0 3px'>支付状态：</span>
        <el-select clearable v-model="form.status" placeholder="请选择">
          <el-option
            v-for="item in payStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" style="text-align: left;padding-left: 10px">
        <el-button type="primary" size="mini" @click="getTableData">查询</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData.list" v-loading="loading" stripe style="width: 100%">
      <el-table-column type="index" >
      </el-table-column>
      <el-table-column prop="userName" label="用户名" >
      </el-table-column>
      <el-table-column prop="amount" label="充值金额" >
      </el-table-column>
      <el-table-column  label="支付类型">
        <template slot-scope="scope">
          {{payTypeChange(scope.row.payType)}}
        </template>
      </el-table-column>
      <el-table-column prop="orderNo" label="订单号" width="180">
      </el-table-column>
      <el-table-column  label="结算状态">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 0">成功</div>
          <div v-if="scope.row.status == 1">失败</div>
          <div v-if="scope.row.status == 2">待处理</div>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column prop="finishTime" label="完成时间" width="180">
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: right;padding-right: 20px">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="tableData.pageNumber"
        :page-size="tableData.pageSize"
        layout="total, prev, pager, next"
        :total="tableData.totalRow">
      </el-pagination>
    </div>
  </section>
</template>

<script>
  import judgeTime from '../../../../assets/js/index.js'
  import payType from '../../../../assets/paytype'
  import payStatus from '../../../../assets/paytype/status'
  import payTypeChange from '../../../../assets/paytype/change'
  export default {
    data () {
      return {
        params: [],
        options: [],
        tableData: {},
        payType: payType,
        payStatus: payStatus,
        loading: false,
        payTypeChange: payTypeChange,
        form: {
          pageSize: 10,
          pageNumber: 1,
          beginDate: undefined,
          endDate: undefined,
          payType: undefined,
          status: undefined
        }
      }
    },
    created: function () {
      this.getTableData()
    },
    methods: {
      get: function () {
        this.$http.get('/500/user/self', this.params).then(function (res) {
          console.log(res)
        }, function (res) {
          console.log(res.status)
        })
      },
      getTwo: function () {
        console.log(111)
        this.$http({
          url: '/500/user/self',
          method: 'get',
          data: this.params,
          jsonp: 'cb',
          success: function (res) {
            console.log(res)
          },
          error: function (res) {
            console.log(res.status)
          }
        })
      },
      getTableData: function () {
        this.loading = true
        this.$api.test(this.form).then(res => {
          this.loading = false
          this.tableData = res.data
          this.params = this.tableData.list
          for (let i = 0; i < this.params.length; i++) {
            this.params[i].createTime = judgeTime(this.params[i].createTime)
            console.log(this.params[i].createTime)
          }
        })
      },
      changeDate1 (val) {
        val ? this.form.beginDate = Date.parse(val) : this.form.beginDate = undefined
      },
      changeDate2 (val) {
        val ? this.form.endDate = Date.parse(val) : this.form.endDate = undefined
      },
      handleCurrentChange (val) {
        this.form.pageNumber = val
        this.getTableData()
      }
    }

  }
</script>

<style lang="less">
  #recordCoin {

    .el-input__inner {
      height: 30px;
      line-height: 30px;
      width: 100%;
      padding-right: 0;
      font-size: 12px;
      padding-left: 20px;
    }
    .el-input {
      width: 100% !important;
    }
    .el-input__icon {
      line-height: inherit;
      width: 0;
    }
    .el-input__suffix {
      right: 20px;
    }
  }
</style>
